<header class="page-header clearfix">
    <h4><a ng-if="!dtl.appId" ui-sref="k8s-service({kDbCode: dtl.dbCode})"><i class="fa fa-arrow-left"></i></a>
        <a ng-if="dtl.appId" ui-sref="app-service-detail({id: dtl.appId})"><i class="fa fa-arrow-left"></i></a>服务 {{::dtl.name}}</h4>
    <div class="toolbox">
        <button type="button" ng-disabled="dtl.infoLoading" ng-click="dtl.infoRefresh()"><i class="fa fa-refresh"></i>刷新</button>
        <button type="button" ng-click="dtl.changeReplicas(dtl.name,dtl.podInfo)"><i class="fa fa-plus"></i>扩缩容</button>
    </div>
    <ol class="breadcrumb">
        <li><a ng-href="#/k8s">容器集群</a></li>
        <li><a ui-sref="k8s-service({kDbCode: dtl.dbCode})">服务</a></li>
        <li class="active">服务详情</li>
    </ol>
</header>
<section>
    <div class="panel">
        <div class="panel-heading">详情</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-4">
                    <dt>概况
                        <i ng-show="dtl.infoLoading" class="fa-fw fa fa-refresh fa-spin"></i>
                    </dt>
                    <dd class="service-pod-panel">
                        <div class="clearfix">
                            <div>
                                <div class="text-success">{{dtl.podInfo.running}}</div>
                                <div class="status-name">Running</div>
                            </div>
                            <div>
                                <div class="text-warning">{{dtl.podInfo.pending}}</div>
                                <div class="status-name">Pending</div>
                            </div>
                            <div>
                                <div class="text-danger">{{dtl.podInfo.failed}}</div>
                                <div class="status-name">Failed</div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div>
                                <div class="text-info">{{dtl.podInfo.current}}</div>
                                <div class="status-name">Current</div>
                            </div>
                            <div>
                                <div>{{dtl.podInfo.desired}}</div>
                                <div class="status-name">Desired</div>
                            </div>
                            <a ng-click="dtl.changeReplicas(dtl.name,dtl.podInfo)" href="javascript:void(0)">
                                <div><i class="fa fa-plus"></i></div>
                                <div class="status-name">扩缩容</div>
                            </a>
                        </div>
                    </dd>
                </div>
                <div class="col-md-8 col-desc-padding">
                    <div class="row">
                        <div class="col-md-6">
                            <dt>名称</dt>
                            <dd>{{::dtl.name}}</dd>
                        </div>
                        <div class="col-md-6">
                            <dt>命名空间</dt>
                            <dd>{{::dtl.namesp}}</dd>
                        </div>
                    </div>
                    <dt>镜像</dt>
                    <dd>
                        {{::dtl.images.join(', ')}}
                    </dd>
                    <dt>Selector</dt>
                    <dd>
                        {{::dtl.selector.join(', ')}}
                    </dd>
                    <dt>Labels</dt>
                    <dd>
                        {{::dtl.labels.join(', ')}}
                    </dd>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-list">
        <div class="panel-heading">Pod 列表</div>
        <div ui-view class="panel-body"></div>
    </div>
</section>